<template>
  <div>
    <!-- 添加权限弹出层 -->
    <el-dialog title="添加权限" :visible.sync="dialogVisible" width="42%">
      <div>
        <el-select v-model="currentPermission" multiple placeholder="请选择权限" style="width: 560px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPermissionCommit">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      border
      :data="tableData"
      default-expand-all
      row-key="userId"
      style="width: 100%; margin-bottom: 20px"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="员工工号" prop="userNumber" width="250" />
      <el-table-column label="员工工号" prop="userType" width="200">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userType === '2'" type="danger">超级管理员</el-tag>
          <el-tag v-if="scope.row.userType === '1'" type="primary">管理员</el-tag>
          <el-tag v-if="scope.row.userType === '0'" type="success">普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="权限路径" prop="permissionUrl" width="250" />
      <el-table-column label="权限名称" prop="permissionName" width="250" />
      <el-table-column label="操作" prop="address">
        <template slot-scope="scope">
          <el-button v-if="scope.row.userNumber !== undefined" size="large" type="text" @click="addPermission(scope.row)">
            添加权限
          </el-button>
          <el-popconfirm style="margin-left: 15px" title="确定要删除该用户吗？" @confirm="deletePermission(scope.row)">
            <el-button v-if="scope.row.userNumber === undefined" size="large" style="color: #f56c6c" slot="reference" type="text">
              删除权限
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import http_login from '@/api/user/user.js'
  export default {
    name: 'Permission',
    data() {
      return {
        tableData: [],
        userInfoList: {},
        pathList: [
          {
            index: '1',
            url: '/user/user',
            name: '用户管理权限',
          },
          {
            index: '2',
            url: '/user/permission',
            name: '权限管理权限',
          },
          {
            index: '3',
            url: '/audit/avatar',
            name: '头像审核权限',
          },
          {
            index: '4',
            url: '/audit/posts',
            name: '职位审核权限',
          },
          {
            index: '5',
            url: '/audit/company',
            name: '公司审核权限',
          },
          {
            index: '6',
            url: '/message/message',
            name: '客服咨询权限',
          },
        ],
        dialogVisible: false,
        options: [
          {
            value: '1',
            label: '用户管理',
          },
          {
            value: '2',
            label: '权限管理',
          },
          {
            value: '3',
            label: '头像审核',
          },
          {
            value: '4',
            label: '职位审核',
          },
          {
            value: '5',
            label: '公司审核',
          },
          {
            value: '6',
            label: '客服咨询',
          },
        ],
        currentPermission: [],
        currentUserId: '',
      }
    },
    mounted() {
      this.getAllUserInfo()
    },
    methods: {
      async getAllUserInfo() {
        const result = await http_login.getAllUserInfo()
        if (result.code === 200) {
          this.userInfoList = result.data
          // 整理userInfoList数据
          for (let i = 0; i < this.userInfoList.length; i++) {
            const permissionList = JSON.parse(this.userInfoList[i].userPermission)
            this.userInfoList[i].userPermission = permissionList
            const children = []
            for (let j = 0; j < permissionList.length; j++) {
              for (let k = 0; k < this.pathList.length; k++) {
                if (permissionList[j] === this.pathList[k].index) {
                  children.push({
                    userId: this.userInfoList[i].userId,
                    index: this.pathList[k].index,
                    permissionUrl: this.pathList[k].url,
                    permissionName: this.pathList[k].name,
                  })
                  break
                }
              }
            }
            this.userInfoList[i].children = children
          }
          if (JSON.parse(localStorage.getItem('userInfo')).userType === '2') {
            // 如果是超级管理员都可以修改
            this.tableData = this.userInfoList
          } else {
            // 如果是普通管理员，只能修改普通用户并且添加和删除的权限只能是普通的四个
            this.tableData = this.userInfoList.filter((item) => {
              return item.userType === '0'
            })
          }
        }
      },
      // 添加权限
      addPermission(data) {
        this.dialogVisible = true
        this.currentUserId = data.userId
        if (JSON.parse(localStorage.getItem('userInfo')).userType !== '2') {
          this.options = this.options.filter((item) => {
            return item.value !== '1' && item.value !== '2'
          })
        }

        this.currentPermission = data.userPermission
      },
      // 删除权限
      async deletePermission(data) {
        const result = await http_login.deletePermission(data.userId, data.index)
        if (result.code === 200) {
          this.getAllUserInfo()
          this.$message({
            message: '删除权限成功',
            type: 'success',
          })
        }
      },
      // 缺点添加权限
      async addPermissionCommit() {
        const result = await http_login.updatePermission(this.currentUserId, this.currentPermission)
        if (result.code === 200) {
          this.dialogVisible = false
          this.$message({
            message: '添加权限成功',
            type: 'success',
          })
          this.getAllUserInfo()
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
